<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>车牌号吉祥查询，车牌号选号，自动扫描选号</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../static/ydui/ydui.rem.css" th:href="@{/ydui/ydui.rem.css}"/>
    <link rel="stylesheet" href="../../static/ydui/ydui.base.css" th:href="@{/ydui/ydui.base.css}"/>
    <link rel="stylesheet" href="../../static/css/loading.css" th:href="@{/css/loading.css}"/>
    <link rel="stylesheet" href="../../static/css/wordflicker.css" th:href="@{/css/wordflicker.css}"/>
    <!-- 引入rem自适应类库 -->
    <script src="../../static/ydui/ydui.flexible.js" th:src="@{/ydui/ydui.flexible.js}"></script>
    <script src="../../static/ydui/lib.rem/sendcode/index.js" th:src="@{/ydui/lib.rem/sendcode/index.js}"></script>
    <script src="../../static/wxUtils.js" th:src="@{/wxUtils.js?v=20201227}"/></script>
    <style>
        .title_box{height: auto;background: url(./img/topbj.png) repeat-x; border: dotted 1px #c56202;}
        .title_text_box{margin: 5px;color: #c56202;font-size: 12px;line-height: 18px;}
        .help_text_box{margin: 5px;}
        .mobileinfo_box{text-align: left;min-height: 60px;width: 99%;}
        .mobile_flag{display: flex;}

    </style>

</head>
<body>
<input type="hidden" name="openid" id="openid" th:attr="value=#{openid}"/>
<div id="pageLoading">
      <div class="loader-inner ball-beat">
        <div></div>
        <div></div>
        <div></div>
      </div>
</div>
<div id="app" v-cloak>
    <yd-layout>
        <yd-top slot="top" title="手机号吉祥" class="title_box">
            <div class="title_text_box">
                <span class="flicker_sign">当<span class="fast-flicker">AI</span>智能<span class="flicker">遇上</span>易经</span>
                AI智能选好号，仅供趣味休闲，请勿沉迷。要坚信命运掌握在自己手里，努力才能创造美好未来！所谓“时来运转”，只是机会属于有准备的人；
                所谓“逆天改命”，只是因为一直在奋勇前行！
            </div>

        </yd-top>

        <div>
            <yd-cell-group>
                <yd-cell-item>
                    <yd-icon slot="icon" name="shopcart" size=".45rem"></yd-icon>
                    <yd-input slot="left" v-model="phone" ref="phone"  placeholder="请输入车牌号"></yd-input>
                    <yd-button slot="right"
                         v-model="start1" 
                         @click.native="sendCode1" 
                         type="warning"
            		>开始测算</yd-button>
                </yd-cell-item>
            </yd-cell-group>
            <yd-cell-group>
                <yd-cell-item>
                    <div class="mobileinfo_head" slot="left">
                        <yd-badge slot="float" type="danger" class="mobile_flag" v-show="showLuckFlag1">吉</yd-badge>
                        <yd-badge slot="float" type="warning" class="mobile_flag" v-show="showLuckFlag2">吉</yd-badge>
                        <yd-badge slot="float" type="hollow" class="mobile_flag" v-show="showLuckFlag3">平</yd-badge>
                        <yd-icon slot="icon" name="verifycode" size=".45rem"></yd-icon>
                    </div>
                    <div class="mobileinfo_box" slot="right">
                        <yd-badge shape="square" type="hollow"><yd-countup :endnum="mobileLuckNum" duration="2" ref="luckNumCountup" v-model="mobileLuckNum"></yd-countup></yd-badge>
                        <span>{{mobileLuckInfo}}</span>
                        <div><yd-badge type="hollow" shape="square">{{fortuneStatus}}</yd-badge>
                            <span>{{mobileFortune}}</span></div>
                    </div>
                </yd-cell-item>
            </yd-cell-group>

            <yd-step theme="1" current="3">
                <yd-step-item>
                    <span slot="bottom">输入车牌号</span>
                </yd-step-item>
                <yd-step-item>
                    <span slot="bottom">测算吉祥</span>
                </yd-step-item>
                <yd-step-item>
                    <span slot="top">可拍照选号界面</span>
                    <span slot="bottom">自动测算帮助选号</span>
                </yd-step-item>
            </yd-step>

            <yd-button-group>
                <a href="cartnumpic"><yd-button type="primary" size="large"  >要选号请拍照上传自动帮你选号</yd-button></a>
                <a href="cartnumlist"><yd-button bgcolor="blue" color="#FFF" size="large"  >到生成自选车牌号页面</yd-button></a>
            </yd-button-group>
        </div>

        <yd-bottom slot="bottom">
            <yd-flexbox direction="vertical" class="title_box">

                <div class="help_text_box">
                    <b>车牌号码测吉祥说明</b>：寓意吉祥的车牌号码，除总理数吉祥外。有所谓阴阳互见，就是车牌号的数字要有单有双；卦象无不良；五行与主人喜神匹配，即1为阳木、2为阴木。3为阳火、4为阴火。5为阳土、6为阴土。7为阳金、8为阴金。9为阳水、0为阴水。1与6的组合为水；2与7的组合为火；3与8的组合为木；4与9的组合为金；0与5的组合为土。
                </div>

            </yd-flexbox>

        </yd-bottom>

    </yd-layout>

</div>

<!-- 引入 Vue -->
<script src="../js/vue.min.js" th:src="@{/js/vue.min.js}"></script>
<script src="../js/axios.min.js" th:src="@{/js/axios.min.js}"></script>
<!-- 引入组件库 -->
<script src="../ydui/ydui.rem.js" th:src="@{/ydui/ydui.rem.js}"></script>

<script th:inline="javascript">
/*<![CDATA[*/
	var openid = /*[[${openid}]]*/ '';
	const saasId = /*[[${saasId}]]*/ '01';
	const rdirFlag = /*[[${rdirFlag}]]*/ '';
	const redirectURL = /*[[${redirectURL}]]*/ '';
	const wxauthStatus = /*[[${wxauthStatus}]]*/ '';
	const ctx = /*[[@{/}]]*/ '\/lphone\/';
	const isWeixn = is_weixn();
	axios.defaults.baseURL = ctx+'api';
	defaultLuckInfo = "输入你的车牌号就能AI测算出人生格局？";
	
	if (rdirFlag!='1' && (openid==null || openid=="" || openid=="def001") ) {
		openid = sessionStorage.getItem(saasId+"_session_openid");
		if (openid==null || openid=="") {
			if(!isWeixn) console.log("没用户openid，跳转通过微信授权取openid.isWeixn:"+isWeixn);
			if(isWeixn && redirectURL != '' && 1==2) {
				if (wxauthStatus != 'ok') {
					if(confirm('是否确认微信权限？\n以便进行业务功能操作。') ){
						window.location.replace(redirectURL);
					}
				} else {
					window.location.replace(redirectURL);
				} 				
			}
		}
	} else {
		sessionStorage.setItem(saasId+"_session_openid", openid);
	}
/*]]>*/
 </script>
  
<script type="text/javascript">
 /*<![CDATA[*/
    new Vue({
        el: '#app',
        data() {
            return {
            	currstep: 1,
            	phone:"",
            	vcode:"",
            	username:"",
            	address:"",
            	verifyBtIsAble: true,
                start1: false,
                showLuckFlag1: false,
                showLuckFlag2: false,
                showLuckFlag3: false,
                mobileLuckInfo: defaultLuckInfo,
                mobileLuckNum: 10,
                mobileFortune: "",
                fortuneStatus: "",
                saasId: saasId,
                openid: openid,
                viewbtns:[]
            }
        },
        created:function () {
    		document.body.removeChild(document.getElementById('pageLoading'));
    		
    	},
    	mounted: function() {
    		if (openid==null || openid=="" || openid=="def001" ) {
    			this.$dialog.notify({
                    mes: '没微信用户授权信息！',
                    timeout: 3000
                });
    		} else {
    			var _wxUIdialog = this.$dialog;
                var _this = this;
               	// 微信页面授权后，正常显示页面时，当前租户标志OK
    			axios.get(ctx + saasId + '/wxauthok')
    			.then(function (response) {
            	  	if(!isWeixn) console.log(response);
            	 })
            	 .catch(function (error) {
            		 if(!isWeixn) console.log('error',error);
            		 _wxUIdialog.toast({
                        mes: '系统异常，请等下重试!',
                        timeout: 1500,
                        icon: 'error'
                    });
            	 });
    		}
    	},
		watch: {
			vcode(val) {  // test 验证码直接通过
				if(!isWeixn && val == '88888890') {
					this.verifyBtIsAble = false;
					console.log("test 验证码直接通过按钮。"+val);
				}
			}
    	},
    	computed: {
    		ecPhone: function() {
    			var reg = /^(\d{3})\d*(\d{4})$/;
    			var encodePhone = this.phone.replace(reg,'$1****$2');
    			return encodePhone;
    		},
    		wxUrl: function() {
    			return redirectURL;
    		},
    		helpUrl: function() {
    			var url = "https://mp.weixin.qq.com/s/kP6860qwEM2W2JGWeoeiww";
    			if (isWeixn && 1==2) {
    				return "http://mp.weixinbridge.com/mp/wapredirect?action=appmsg_redirect&uin=777&biz=MjM5ODY1MDg0MA==&mid=2751365251&idx=1&type=0&scene=0&url="+encodeURIComponent(url);
    			} else {
    				return url;
    			}
    		}
    	},
        methods: {
        	verifycodeClick: function () {
                var _wxUIdialog = this.$dialog;
                var _this = this;
            	this.$router.push({ path:'/cartnumpic'  });
            },
            sendCode1: function () {
                var _wxUIdialog = this.$dialog;
                var _this = this;
                var phoneinput = this.$refs.phone;
                var luckNumCountup = this.$refs.luckNumCountup;
                if(this.phone=="" || ! phoneinput.valid) {
                	_wxUIdialog.toast({
                        mes: '请输入正确车牌号！',
                        timeout: 1000,
                        icon: 'error'
                    });
                	_this.start1=false;
                	return;
                }
                this.$dialog.loading.open('测算中...');
                _this.showLuckFlag1=false;
                _this.showLuckFlag2=false;
                _this.showLuckFlag3=false;
                _this.mobileLuckNum = 0;
                _this.mobileLuckInfo = defaultLuckInfo;
                _this.mobileFortune = "";
                _this.fortuneStatus = "";
                
                axios.post('/cartluck', {
                		openid: openid,
                		cartNum: this.phone,
                		saasId: this.saasId
                	 })
                	 .then(function (response) {
                		 if(!isWeixn) console.log(response);
                		 var res = response.data;
                	  	 if (res.code != 200) {
                	  		_wxUIdialog.toast({
                                mes: res.message,
                                timeout: 2500,
                                icon: 'error'
                            });
                	  		_this.start1=false;
                	  	 } else {
                	  		_this.verifyBtIsAble = false;
                            _this.showLuckFlag1 = (res.data.luckStatus == "吉" || res.data.luckStatus == "大吉");
                            _this.showLuckFlag2 = (res.data.luckStatus == "吉带凶" || res.data.luckStatus == "半吉");
                            _this.showLuckFlag3 = (res.data.luckStatus == "凶");
                            _this.mobileLuckNum = res.data.luckNum;
                            _this.mobileLuckInfo = res.data.meaning;
                            _this.mobileFortune = res.data.fortune;
                            _this.fortuneStatus = res.data.fortuneStatus;
                            luckNumCountup.instance.start();
                	  	 }
                	 })
                	 .catch(function (error) {
                		 if(!isWeixn) console.log('error',error);
                		 _wxUIdialog.toast({
                            mes: '系统异常，请等下重试!',
                            timeout: 2500,
                            icon: 'error'
                        });
                	 });
                
                setTimeout(() => {

                    this.start1 = true;
                    this.$dialog.loading.close();

                    /*this.$dialog.toast({
                        mes: '已发送',
                        icon: 'success',
                        timeout: 1500
                    });*/

                }, 1000);
            }
    	
        }
    });
  /*]]>*/
</script>
</body>
</html>